<template>
  <div class="hello">
    <button @click="isShow = !isShow"> 隐藏/显示</button>
    <transition name="akk">
      <h1 v-show="isShow" :class=className> Hello</h1>
    </transition>
    
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      isShow:true,
    }
  },
  computed:{
    className(){
      return this.isShow ? 'from' : 'go'
    }
  }
}
</script>


<style lang="less" scoped>
h1{
  background-color: orange;
}
.akk-enter-active{
  animation: animat 1s linear;
}
.akk-leave-active{
  animation: animat 1s linear reverse;
}

@keyframes animat {
  from{
    transform: translateX(-100%);
  }
  to{
    transform: translateX(0px);
  }
}
</style>